<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../app/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../common/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../common/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../common/js/bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
		<link rel="stylesheet" type="text/css" href="../../app/css/auth_style.css" />
		<link rel="stylesheet" type="text/css" href="../../app/css/store_member/style.css" />
		<script src="../../app/js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-s8"></script>
		<script src="../../app/js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../app/js/jquery.cookie.js"></script>
		<style type="text/css">
			.container-fluid {
				padding: 0;
			}
		</style>
	</head>

	<body style="background-color: #F5F5F5;">
		<div class="header">
			<a href="javascript:history.go(-1)" class="glyphicon glyphicon-menu-left f28 col-xs-4" style="text-align: left;"></a>
			<span class="f28 col-xs-4" style="text-align: center;">创客续费</span>
			<!--<span class="f28 col-xs-4" style="text-align: right;">会员认证</span>-->
		</div>
		<div class="container-fluid">
			<ul>
				<li class="vip_msg_add"> <span>用户身份：</span><input type="text" name="" id="" value="创客" /></li>
				<li class="vip_msg_add"> <span>*真实姓名：</span><input type="text" name="trueName" id="trueName" value="" placeholder="请输入姓名" /></li>
				<li class="vip_msg_add"> <span>*手机号：</span><input type="text" name="mobile" id="mobile" value="" placeholder="请输入手机号" /></li>
				<li class="vip_msg_add"> <span>*邮箱：</span><input type="text" name="email" id="email" value="" placeholder="请输入邮箱" /></li>
				<li class="vip_msg_add"> <span>*身份证号码：</span><input type="text" name="identityNumber" id="identityNumber" value="" placeholder="请输入身份证号码" /></li>

			</ul>
			<ul>
				<li class="vip_msg_add">
					<span>*身份证正面：</span>
					<p>
						立即上传
						<input class="card_pic" type="file" name="image" id="image" value="" onchange="test()" />
					</p>
				</li>
				<li class="vip_msg_add">
					<span>*身份证反面：</span>
					<p>
						立即上传
						<input class="card_pic" type="file" name="image" id="image" value="" onchange="test()" />
					</p>
				</li>
				<li class="vip_msg_add">
					<span>*手持身份证照片：</span>
					<p>
						立即上传
						<input class="card_pic" type="file" name="image" id="image" value="" onchange="test()" />
					</p>
				</li>
			</ul>
			<p style="padding-left: 0.388888rem;">会员费用：<span class="huiyuan" style="color: #E9303E;">199.00(元/年)</span></p>
			<p style="text-align: center;"><button class="add_btn" onclick="readd()" id="add_btn2" data-toggle="modal">立即支付</button></p>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 50%;margin-top: -50%;">
			<div class="modal-dialog" style="width: 100%;margin: 0;">
				<div class="modal-content">
					<div class="modal-header" style="background: #FFFFFF;border: 0; ">
						<p style="text-align: center;font-size: .4rem;">--请选择支付方式--</p>
					</div>
					<div class="modal-body" style="text-align: center;background: #FFFFFF;line-height: 25px;">
						<!--<a id="_sharegoods" onclick="ShareGoods()" style="color: #959595; padding-right: 14px;">{{sharegoods}}</a>-->
						<input type="radio" name="zhifu" id="zhifu" class="zhif" value="" /><img src="../../app/images/coalltion/zhifubao.jpg" style="width: 1rem;" />
						<input type="radio" name="zhifu" id="zhifu" class="zhif" value="" style="margin-left: 2rem;" /><img src="../../app/images/coalltion/weixin.jpg" style="width: 1.3rem;" />
					</div>
					<div class="modal-footer" style="text-align: center;background: #FFFFFF;height: 50px;line-height: 25px;">
						<button class="btn btn-2login" onclick="sub()" style="width: 45%;background-color:red;color: white;">确认支付</button>
						<button class="btn btn-2login" id="quX" data-dismiss="modal" aria-hidden="true" style="width: 45%;background-color:white;color: red;border: 1px solid red;">取消支付</button>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</body>
	<script type="text/javascript">
		var tokenReztApp = $.cookie("tokenReztApp");
		console.log(tokenReztApp);
		if(!tokenReztApp) {
			window.location.href = "../../app/view/login/login/login.html";
		}
		$(function() {
			currentyf();
		});

		//用户信息
		var user, role;
		//获取当前会员信息
		function currentyf() {
			$.ajax({
				cache: false,
				type: "GET",
				url: "http://47.104.13.109/member-service/auth/current?token=" + tokenReztApp,
				dataType: "JSON",
				async: false,
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					$.removeCookie('tokenReztApp', {
						expires: 7,
						path: '/'
					});
					window.location.href = "../../app/view/login/login/login.html";
				},
				success: function(data) {
					/*if(data.roleList[0].id != "f2") {
						window.location.href = "../../app/view/login/login/login.html";
					}*/
					console.log(data.ext1);
					user = data.loginName;
					role = data.roleList[0].id; //角色
				}
			});
		}

		function test() {
			var filePath = $("#image").val();
			//			alert(filePath);
			if("" != filePath) {
				var fileType = getFileType(filePath);
				//				console.log(fileType);
				//判断上传的附件是否为图片  
				if("jpg" != fileType && "jpeg" != fileType && "png" != fileType) {
					$("#image").val("");
					alert("请上传JPG,JPEG,PNG格式的图片");
				} else {
					//获取附件大小（单位：KB）  
					var fileSize = document.getElementById("image").files[0].size / 1024;
					$("#image").parent().text(filePath);

					if(fileSize > 2048) {
						alert("图片大小不能超过2MB");
					}
				}
			}
		}

		function getFileType(filePath) {
			var startIndex = filePath.lastIndexOf(".");
			if(startIndex != -1)
				return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
			else return "";
		}
		var modePayment = 0;
		var modebol = false;

		function readd() {
			var pattern1 = /^1\d{10}$/; //手机号
			var pattern2 = /^\w+[@]\w+[.][\w.]+$/; //邮箱
			var pattern3 = /^\d{15}|\d{}18$/; //身份证号
			var pattern4 = /^[\u4E00-\u9FA5]{2,4}$/ // 中文名
			if(!pattern4.test($("#trueName").val())) {
				return alert("请输入真实姓名");
			}
			if(!pattern1.test($("#mobile").val())) {
				return alert("请输入正确的手机号码");
			}
			if(!pattern2.test($("#email").val())) {
				return alert("请输入正确的邮箱地址");
			}
			if(!pattern3.test($("#identityNumber").val())) {
				return alert("请输入正确的身份证号");
			}
			$('#add_btn2').attr('data-target', '#myModal');
		}
		$(".zhif").click(function() {
			modePayment = $(this).index(".zhif") + 1;
			modebol = true;
		})
		$("#quX").click(function() {
			modebol = false;
			$('#add_btn2').attr('data-target', '');
		})

		function sub() {
			if(modebol) {
				$.ajax({
					type: "post",
					url: "http://47.104.13.109/applyfor-service/founder/applyfor",
					async: true,
					data: {
						"applyforType": "1",
						"applyforUser": user,
						"gratitude": "",
						"fansname": $('#trueName').val(),
						"trueName": $('#trueName').val(),
						"mobile": $('#mobile').val(),
						"email": $('#email').val(),
						"identityNumber": $('#identityNumber').val(),
						"identityJusturl": $('.card_pic').eq(0).val(),
						"identityAgainsturl": $('.card_pic').eq(1).val(),
						"identityHandurl": $('.card_pic').eq(2).val(),
						"membercost": parseFloat($('.huiyuan').html())
					},
					success: function(data) {
						console.log(data);
						if(data) {
							alert('订单已提交');
							window.location.href = "renewal.html";
						}
					},
					error: function(e) {
						console.log("出错" + e);
					}
				});
			} else {
				alert("请选择支付方式")
			}
		}
	</script>

</html>